import 'package:flutter/material.dart';
import '../../domain/order_item.dart';
import '../../../../utils/formatters.dart';
import 'order_type_strategy.dart';


/// `OrderItemWidget` 用于显示单个订单项的详细信息。
///
/// 这个 Widget 负责渲染单个订单的视觉表现，包括订单号、日期、类型和金额。
/// 它巧妙地运用了策略模式（`OrderStrategyFactory`），根据订单类型（`item.type`）
/// 动态地选择不同的 UI 构建策略（例如，不同类型的订单标签有不同的颜色和图标）。
///
/// 整个组件被 `InkWell` 包裹，以提供点击时的水波纹效果，并可以通过 `onTap` 回调处理点击事件。
///
/// 负责渲染单个订单的视觉表现，包括订单号、日期、类型和金额。
/// 使用策略模式动态处理不同订单类型的UI展示，并支持点击交互。
class OrderItemWidget extends StatelessWidget {
  /// 要显示的订单数据模型。
  final OrderItem item;

  /// 点击订单项时的回调函数。
  final VoidCallback? onTap;

  /// `OrderItemWidget` 的构造函数。
  const OrderItemWidget({super.key, required this.item, this.onTap});

  @override
  Widget build(BuildContext context) {
    // 通过工厂类获取与订单类型匹配的显示策略。
    final strategy = OrderStrategyFactory.getStrategy(item.type);

    // `InkWell` 为其子组件提供了点击效果和事件处理。
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(10),
      // `Container` 作为订单项的根布局，设置了内边距和装饰（背景色、圆角）。
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          color: const Color(0xFF006241), // Starbucks green
          borderRadius: BorderRadius.circular(8),
        ),
        // `Column` 垂直排列订单的各个信息部分。
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部行：订单号和日期。
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 使用 `Flexible` 和 `TextOverflow.ellipsis` 防止订单号过长导致布局溢出。
                Flexible(
                  fit: FlexFit.loose,
                  child: Text(
                    '订单编号 ${item.id}',
                    style: TextStyle(
                        color: Colors.white.withOpacity(0.85), fontSize: 12),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                // 使用 `Formatters` 工具类格式化日期时间。
                Text(Formatters.formatDateTime(item.date),
                    style: TextStyle(
                        color: Colors.white.withOpacity(0.85), fontSize: 12)),
              ],
            ),
            const SizedBox(height: 8),
            // 底部行：订单类型标签和金额。
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                // 使用策略模式构建订单类型标签。
                strategy.buildTag(item.type),
                // 金额部分。
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('收银金额',
                        style: TextStyle(
                            color: Colors.white.withOpacity(0.85),
                            fontSize: 10)),
                    const SizedBox(height: 4),
                    Text('¥${item.amount.toStringAsFixed(2)}',
                        style: const TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.bold)),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}